<template>
    <el-dialog
        title="选择用户"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="800px"
    >
        <div v-if="reset">
            <el-row>
                <el-col>
                    <el-form
                        :inline="true"
                        :model="queryForm"
                        size="small"
                    >
                        <el-form-item label>
                            <el-input v-model="queryForm.loginName" placeholder="登录账号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label>
                            <el-input v-model="queryForm.name" placeholder="姓名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label>
                            <el-input v-model="queryForm.phone" placeholder="手机号" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <table-ex
                        ref="tableExSel"
                        :queryCallback="queryCallback"
                        :handleSelectionChange="onSelectionChange"
                        :sizeSel="false"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="账号">
                            <template slot-scope="scope">
                                <div>
                                    <strong
                                        style="margin-right:10px;"
                                        v-if="scope.row.loginName"
                                    >{{scope.row.loginName}}</strong>
                                    <el-tag
                                        size="small"
                                        v-if="scope.row.state == 1 && scope.row.effectTime == null"
                                        type="warning"
                                        :disable-transitions="true"
                                        effect="plain"
                                    >未开户</el-tag>
                                    <el-tag
                                        size="small"
                                        v-if="scope.row.state == 2"
                                        type="danger"
                                        :disable-transitions="true"
                                        effect="plain"
                                    >禁用</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="用户姓名" width="160"></el-table-column>
                        <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
                        <el-table-column label="角色" width="150" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span
                                    v-for="item in scope.row.roleList"
                                    :key="item.id"
                                >{{item.name}},</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptName" label="所属组织"></el-table-column>
                    </table-ex>
                </el-col>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import TableEx from '../../components/TableEx.vue'
import user_api from '../../api/user_api';
export default {
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        loading: Boolean,
        projectId: {
            type: String,
            default() {
                return null;
            }
        },
    },
    components: {
        TableEx,
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    data() {
        return {
            queryForm: {},
            selectedItems: [],
            showDetailDialog: false,
            loadingSubmit: false,
            reset: true,
        }
    },
    methods: {
        queryCallback(param) {
            return user_api.page({
                query: this.queryForm,
                ...param
            })
        },
        onQuery(event = null, type = 1) {
            this.$refs.tableExSel.refresh(type)
        },
        handleSubmit() {
            this.success(this.selectedItems)
        },
        handleCancel() {
            this.cancel()
        },
        onSelectionChange(items) {
            this.selectedItems = items
        },
    }
}
</script>

<style scoped>
</style>
